<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    width="750px"
    :maskClosable="false"
    :forceRender="true">
    <div style="margin-top: 12px;" >
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules" >
        <a-form-model-item ref="organizationUnitName" label="组织名称" prop="organizationUnitName" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-model="addForm.organizationUnitName"
            placeholder="请输入组织名称"
            @blur="() => { $refs.organizationUnitName.onFieldBlur() }"></a-input>
        </a-form-model-item>

        <a-form-model-item label="组织编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-model="addForm.organizationUnitCode" type="text" placeholder="请输入组织编号"/>
        </a-form-model-item>

      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button
        type="primary"
        :visible="visibleBtn"
        :loading="loadingBtn"
        @click="handleOk" >
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { addOrg, detailOrg, editOrg } from '@/api/org'
export default {
    data () {
        return {
            addRules: {
                organizationUnitName: [
                    { required: true, message: '请输入组织名称!', trigger: 'blur' }
                ]
            },
            addForm: {
                organizationUnitName: '',
                organizationUnitCode: ''
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            disableSubmit: false,
            iconChooseVisible: false,
            disable: true,
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: null
        }
    },
    methods: {
        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.visible = true
            return this
        },
        setData (row) {
            this.rowData = row
            if (row != 1) {
                this.addForm.organizationUnitId = row.organizationUnitId
                this.addForm.parentOrganizationUnitId = row.organizationUnitId
                if (this.mode == 'edit') {
                    detailOrg(row.organizationUnitId).then(res => {
                        if (res.code == 200) {
                            this.addForm.organizationUnitId = res.data.organizationUnitId
                            this.addForm.organizationUnitCode = res.data.organizationUnitCode
                            this.addForm.organizationUnitName = res.data.organizationUnitName
                        }
                    })
                }
            } else {
                this.addForm.parentOrganizationUnitId = row
            }
        },

        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('success')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    if (this.mode == 'edit') {
                        const { organizationUnitName, organizationUnitCode, organizationUnitId } = this.addForm
                        const par = {
                            organizationName: organizationUnitName,
                            organizationCode: organizationUnitCode,
                            organizationUnitId
                        }

                        this.addForm = par
                    }
                    const Api = this.mode == 'add' ? addOrg : editOrg
                    Api(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.visible = false
                        this.loadingBtn = false
                        this.$emit('success')
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
